<template>
  <!-- menu -->
  <div class="app-menu" v-if="!loginPageFlag">
    <!-- 头 -->
    <el-col :span="18">
      <!-- 目录 -->
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="changeMenu"
          style="margin-top: -6px; background-color: rgba(255, 255, 255, 0%)"
      >
        <template v-for="item in menus">
          <el-menu-item v-if="item.subMenu.length === 0" :index="item.index">
            <el-icon>
              <document v-if="item.index === '1'"/>
              <icon-promotion v-if="item.index === '3'"/>
              <icon-menu v-if="item.index === '4'"/>
              <icon-tools v-if="item.index === '5'"/>
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>

          <el-sub-menu v-else :index="item.index">
            <template #title>
              <el-icon>
                <share v-if="item.index === '2'"/>
              </el-icon>
              {{ item.name }}
            </template>
            <el-menu-item
                v-for="subItem in item.subMenu"
                :index="subItem.index"
            >{{ subItem.name }}
            </el-menu-item
            >
          </el-sub-menu>
        </template>
      </el-menu>
    </el-col>
    <el-col :span="6" style="border-bottom: 1px solid #dcdfe6; height: 100%">
      <el-row align="middle">
        <el-col :span="13" :offset="5">
          <el-row align="middle">
            工作空间：
            <el-select
                v-model="space"
                value-key="id"
                style="width: 10em"
                @change="spaceSet"
            >
              <el-option
                  v-for="item in spaceList"
                  :key="item.id"
                  :value="item"
                  :label="item.spaceName"
              />
            </el-select>
          </el-row>
        </el-col>

        <el-col :span="5">
          <el-dropdown trigger="hover" @command="handleCommand">
            <div class="el-dropdown-link" style="margin-top: 8px">
              <el-avatar :size="36" :src="avatarImgUrl"/>
              <el-icon style="margin-left: -4px" size="20">
                <CaretBottom/>
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </div>
  <!-- content -->
  <div class="aap-content">
    <router-view/>
  </div>

  <div style="position: fixed; bottom: 0; left: 0; width: 100%; text-align: right;">
    <el-link target="_blank" style="font-size: 20px" type="primary" href="https://gitee.com/luduanxu/api-doc">
      开源项目地址（点我）
    </el-link>
  </div>

  <el-dialog v-model="loginDialogFlag" draggable width="600px">
    <login class="login-cls"/>
  </el-dialog>
</template>

<script>
import {
  Picture as IconPicture,
  Delete,
  Document,
  Share,
  Menu as IconMenu,
  Promotion as IconPromotion,
  Tools as IconTools,
  CaretBottom
} from "@element-plus/icons-vue";
import router from "@/router";
import menujs from "@/utils/Menu.js";
import myaxios from "@/plugins/myaxios";
import {ElMessage} from "element-plus";
import Login from "@/components/Login";
import store from "@/store";

export default {
  name: "App",
  components: {
    Login,
    IconPicture,
    Delete,
    Document,
    Share,
    IconMenu,
    IconPromotion,
    IconTools,
    CaretBottom
  },
  data() {
    return {
      loginDialogFlag: this.$store.state.loginDialogFlag,
      loginPageFlag: this.$store.state.loginPageFlag,
      avatarImgUrl: this.$store.state.avatarImgUrl,
      nickName: this.$store.state.nickName,
      userDropdown: ["login", "loginOut"],
      userDropdownFlag: false,
      dialogLeftCol: 8,
      dialogRightCol: 14,
      p: "_red_every_day",
      menus: menujs.menu,
      activeIndex: "1",
      space: {
        spaceName: "没有数据",
      },
      spaceList: [
        {
          spaceName: "没有数据",
        },
      ],
      allEnumId: {ids: [2, 3, 43, 45, 52]},
    };
  },
  methods: {
    changeMenu(key, keyPath) {
      console.log("change menu", key, typeof key, keyPath);
      let me = {};
      for (let ind in keyPath) {
        let keyIn = keyPath[ind];
        if (ind === "0") {
          for (let menu of this.menus) {
            if (menu.index === keyIn) {
              me = menu;
            }
          }
        } else {
          console.log("ind != 0", ind);
          for (const subMenu of me.subMenu) {
            if (subMenu.index === keyIn) {
              me = subMenu;
            }
          }
        }
      }
      console.log("me.path", me.path);
      router.push(me.path);
    },
    handleCommand(command) {
      switch (command) {
        case "info":
          // 进入个人信息修改页面
          break;
        case "logout":
          // 发送退出请求并跳转到登录页
          myaxios
              .post("/dist/logout")
              .then(resp => {
                // 处理请求成功的情况
                console.log(resp.data);
                // 清空本地存储的用户信息
                localStorage.removeItem("userInfo");
                // 跳转到登录页
                this.$router.push({path: "login"});
                store.dispatch('setLoginPageFlag', true)
              })
              .catch(error => {
                // 处理请求失败的情况
                console.log(error);
              });
          break;
        default:
          break;
      }
    },
    getSpace() {
      myaxios.get("/dist/space/getSpace").then(
          rep => {
            if (rep.data.code !== 100) {
              ElMessage.error(rep.data.msg)
              return
            }
            this.spaceList = rep.data.data.spaces;
            this.space = rep.data.data.currentSpace;
            this.spaceSet();
          },
          err => {
            if (err.response.status !== 403) {
              ElMessage.error(err.response.data);
            }
          }
      );
    },
    getEnumAll() {
      myaxios.post("/dist/system/allEnum/getByTypeList", this.allEnumId).then(rep => {
            if (rep.data.code !== 100) {
              ElMessage.error(rep.data.msg)
              return;
            }
            let data = rep.data.data;
            let val = {};
            if (!data) {
              return;
            }
            for (const item of data) {
              if (!item.children) {
                continue;
              }
              switch (item.id) {
                case 2:
                  val.restMethod = item.children;
                  break;
                case 3:
                  val.fieldType = item.children;
                  let fieldTypeMap = {};
                  for (const enumOne of val.fieldType) {
                    fieldTypeMap[enumOne.enumValue.toString()] = enumOne.enumName;
                  }
                  val.fieldTypeMap = fieldTypeMap;
                  break;
                case 43:
                  val.paramType = item.children;
                  break;
                case 45:
                  val.paramDataType = item.children;
                  break;
                case 52:
                  val.descMode = item.children;
                  break;
              }
            }

            this.$store.dispatch("setAllEnum", val);
          },
          err => {
            if (err.response.status !== 403) {
              ElMessage.error(err.response.data);
            }
          }
      );
    },
    spaceSet() {
      this.$store.dispatch("setSpace", this.space);
    },
    init() {
      if (!this.$store.state.loginPageFlag) {
        this.getSpace();
        this.getEnumAll();
      }
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    getLoginDialogFlag() {
      return this.$store.state.loginDialogFlag
    },
    getLoginPageFlag() {
      return this.$store.state.loginPageFlag
    },
    getAvatarImgUrl() {
      return this.$store.state.avatarImgUrl
    }
  },
  watch: {
    getLoginDialogFlag(val) {
      this.loginDialogFlag = val;
    },
    loginDialogFlag(val) {
      this.$store.dispatch('setLoginDialogFlag', val)
    },
    getLoginPageFlag(val) {
      this.loginPageFlag = val;
    },
    loginPageFlag(val) {
      if (!val) {
        this.init()
      }
      this.$store.dispatch('setLoginPageFlag', val)
    },
    getAvatarImgUrl(val) {
      this.avatarImgUrl = val;
    },
    avatarImgUrl(val) {
      this.$store.dispatch('setAvatarImgUrl', val)
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.app-menu {
  display: flex;
  width: 100%;
  height: 54px;
  line-height: 54px;
  align-items: center;
  background-color: #bbf3d7;
}

.aap-content {
  height: calc(100% - 54px);
}

html,
body {
  width: 100%;
  height: 100%;
  /* min-width: 1000px; */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.login-cls {
  margin-bottom: 30px;
}
</style>
